<template>
  <div
    class="asidecontent"
    :style="{
      width: isMenuOpen ? 'auto' : '0px',
      minHeight: !isTreeFold ? '45px' : '40vh',
    }"
    v-if="isTreeShow"
  >
    <!-- 控制侧边栏 显示 -->
    <input type="checkbox" v-model="isMenuOpen" id="menubtn" />
    <label for="menubtn" v-if="isTreeFold"
      ><i
        :class="{
          'iconfont icon-suojin': isMenuOpen,
          'iconfont icon-right': !isMenuOpen,
        }"
      ></i
    ></label>
    <!-- 侧边栏 -->
    <div class="layertree">
      <!-- 侧边栏的标题 开始-->
      <div class="title">
        <h3>图层目录</h3>
        <div class="icon">
          <i
            :class="{
              'iconfont icon-shang': isTreeFold,
              'iconfont icon-xia': !isTreeFold,
            }"
            @click="isTreeFold = !isTreeFold"
          ></i>
          <i class="iconfont icon-close" @click="isTreeShow = false"></i>
        </div>
      </div>

      <div class="layer-content" v-show="isTreeFold">
        <el-tree
          :data="treeData"
          style="max-width: 600px"
          show-checkbox
          node-key="id"
          :default-expand-all="true"
          :default-checked-keys="[1, 2, 3, 4, 5]"
          :props="defaultProps"
          @check="handleCheckChange"
          class="eltree"
        >
          <template #default="{ node, data }">
            <span class="custom-tree-node">
              <img
                src="@/assets/map.png"
                alt=""
                v-if="node.label == '地图文档'"
              />
              <img
                src="@/assets/layer.png"
                alt=""
                v-if="node.label == '摄像图层'"
              />
              <img
                src="@/assets/球机摄像头.png"
                alt=""
                v-if="node.label === '球机摄像头'"
              />
              <img
                src="@/assets/枪机摄像头.png"
                alt=""
                v-if="node.label === '枪机摄像头'"
              />
              <span>{{ data.label }}</span>
            </span>
          </template>
        </el-tree>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from "vue"
const { proxy } = getCurrentInstance()
import { useMineStore } from "@/stores/mineMap"
import { removeHighlightLayer } from "@/utils/HighLayer"
//关闭弹窗
const { closePopup } = useMineStore()
//关闭绘制图形
import { removeLayer } from "@/utils/Draw"
const isTreeShow = ref(true) //控制图层目录树的显示
const isMenuOpen = ref(true) //控制图层目录树的缩进
const isTreeFold = ref(true) //控制图层目录树的折叠
const treeData = ref([]) //目录tree 数据
/* 1- 树形结构 data */
const defaultProps = {
  children: "children", //指定子树为节点对象的某个属性值
  label: "label", //指定节点标签为节点对象的某个属性值
}
const renderData = () => {
  treeData.value = [
    {
      id: 1,
      label: "地图文档",
      children: [
        {
          id: 2,
          label: "摄像图层",
          children: [
            {
              id: 3,
              label: "球机摄像头",
              kind: "Ball", // 绑定 kind 值
            },
            {
              id: 4,
              label: "枪机摄像头",
              kind: "Gun", // 绑定 kind 值
            },
          ],
        },
      ],
    },
  ]
}

//点击事件
const handleCheckChange = (data, checked) => {
  const map = proxy.$map

  // 获取所有选中的节点
  const checkedNodes = checked.checkedNodes

  // 收集所有选中的 kind 值
  const selectedKinds = checkedNodes
    .map((node) => node.kind) // 获取选中节点的 kind 值
    .filter((kind) => kind) // 过滤掉未绑定 kind 的节点

  // 如果没有选中任何节点，隐藏所有点
  if (selectedKinds.length === 0) {
    if (map.getLayer("symbolLayer")) {
      map.setFilter("symbolLayer", false) // 隐藏所有点
      //关闭弹窗
      closePopup()
      // 移除高亮图层
      removeHighlightLayer(map)
      //移除绘制的图层
      removeLayer(proxy.$map, "circle-layer")
      removeLayer(proxy.$map, "sector-layer")
    }
    return
  }

  // 动态设置 filter
  if (map.getLayer("symbolLayer")) {
    if (selectedKinds.length === 1) {
      // 如果只选中一个节点，直接设置 filter
      map.setFilter("symbolLayer", ["==", ["get", "kind"], selectedKinds[0]])
      //关闭弹窗
      closePopup()
      // 移除高亮图层
      removeHighlightLayer(map)
      //移除绘制的图层
      removeLayer(proxy.$map, "circle-layer")
      removeLayer(proxy.$map, "sector-layer")
    } else {
      // 如果选中多个节点，使用 ["in", "kind", [...]] 过滤
      map.setFilter("symbolLayer", [
        "in",
        ["get", "kind"],
        ["literal", selectedKinds],
      ])
      //关闭弹窗
      closePopup()
      // 移除高亮图层
      removeHighlightLayer(map)
      removeLayer(proxy.$map, "circle-layer")
      removeLayer(proxy.$map, "sector-layer")
    }
  }
}
onMounted(async () => {
  const map = proxy.$map
  renderData()
  // 显示特定 kind 的点
  const showKind = (kind) => {
    if (map && map.getLayer("symbolLayer")) {
      map.setFilter("symbolLayer", ["==", ["get", "kind"], kind])
    }
  }

  // 显示所有点
  const showAll = () => {
    if (map && map.getLayer("symbolLayer")) {
      map.setFilter("symbolLayer", null) // 移除过滤条件，显示所有点
    }
  }

  // 隐藏所有点
  const hideAll = () => {
    if (map && map.getLayer("symbolLayer")) {
      map.setFilter("symbolLayer", ["==", ["get", "kind"], ""]) // 设置一个不可能的条件
    }
  }
})
</script>

<style scoped lang="scss">
@import url(//at.alicdn.com/t/c/font_4702768_kjlsf3r4ibq.css);
.asidecontent {
  z-index: 10000;
  background-color: #fcfcfb90;
  letter-spacing: 0.5px;
  position: relative;
  padding: 0px 6px 0px 6px;
  min-height: 50vh;
  position: fixed;
  top: 25vh; // 使元素垂直居中（假设高度为50vh）
  left: 0; // 固定在屏幕左侧
  // display: flex;
  // flex-direction: column; // 可能需要这个来确保内部元素垂直排列
  overflow: hidden;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3); // 可选：添加一些阴影以增加深度感
  // box-sizing: border-box;
  border-radius: 0px 10px 10px 0px;
  #menubtn {
    display: none;
  }
  label {
    position: absolute;
    top: 48%;
    right: 0;
    height: 45px;
    box-shadow: 0px 0px 1px 0px #000;
    background-color: #cccccc;
    color: #ececec;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index: 99999;
    i {
      margin: 0;
      font-weight: 900;
      padding: 0px 1px;
      font-size: 10px;
    }
    :hover {
      color: #1890ff;
      cursor: pointer;
    }
    &:hover i {
      transform: scale(1.4); /* 示例：悬停时放大图标 */
    }
  }
  .layertree {
    margin: 0px -6px;
    box-sizing: border-box;
    font-size: 18px;
    min-height: 100%;
    width: 200px;
    overflow: hidden;
    transition: width 0.2s;
    color: #000;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-radius: 0px 10px 0px 0px;
      font-size: 15px;
      padding: 8px 15px;
      height: 45px;
      background-color: #2196f3;
      white-space: nowrap; // 防止文本换行
      h3 {
        color: #fff;
      }
      .icon {
        i {
          color: #fff;
          font-size: 14px;
          &:first-child {
            margin-right: 10px;
          }
        }
      }
    }
    .eltree {
      scale: 0.9;
      background-color: inherit;
      .custom-tree-node {
        display: flex;
        img {
          margin-right: 5px;
        }
      }
    }
  }
}
</style>
